$prefix: --data;

$common: (
  //基础颜色
  base-color: #ffffff,
  //边框颜色
  border-color: #3b4158,
  //成功色
  success-color: #35ff48,
  //确认色
  confirmed-color: #27e6e1,
  //警告色
  warning-color: #ff802b,
  //信息色
  info-color: #d6d6d6,
  //危险色
  danger-color: #ff4141,
  //文字渐变背景色
  gradient-bg-text: linear-gradient(0deg, #6196ff 0%, #ffffff 100%),
  //单位项目选择渐变底部border
  select-border: linear-gradient(90deg, #19243c 0%, #254380 53%, #19243c 100%),
  table-bottom-border: 1px solid #30354c ,
);
// 这里键名必须和DATA_DASHBOARD_THEME_Map值相同
$styles: (
  default: (
    //盒子背景色
    box-bg: #0b2241,
    box-bgTab: rgba(32, 44, 81, 0.6),
    line: url("@/assets/screenimg/data6.png") no-repeat right,
    line-right: url("@/assets/screenimg/data6.png") no-repeat left,
    // 单位左侧
    box-item1: a,
    box-item2: b,
    box-item3: c,
    box-item4: d,
    //单位右侧
    box-item1-1: a,
    box-item1-2: b,
    box-item1-3: c,
    //box标题
    box-title-img-transform: translateY(-2px),
    //个体左侧
    box-item2-1: a,
    box-item2-2: b,
    box-item2-3: c,
    box-item2-4: d
  ),
  custom1: (
    //盒子背景色
    box-bg: rgba(21, 58, 93, 0.9),
    box-mt: 12px,
    box-bgTab: rgba(35, 72, 108, 0.8),
    line: url("@/assets/screenimg/data6.png") no-repeat right,
    line-right: url("@/assets/screenimg/data6.png") no-repeat left,
    //box标题
    box-title-flex: row-reverse,
    // 单位左侧
    box-item1: a,
    box-item2: c,
    box-item3: d,
    box-item4: b,
    //单位右侧
    box-item1-1: b,
    box-item1-2: c,
    box-item1-3: a,
    //个体左侧
    box-item2-1: a,
    box-item2-2: b,
    box-item2-3: d,
    box-item2-4: c
  ),
  custom2: (
    //盒子背景色
    box-bg: rgba(#1d2730, 0.8),
    box-bgTab: rgba(41, 51, 64, 0.8),
    line: url("@/assets/datatheme/themeb/blurLine.png") no-repeat right,
    line-right: url("@/assets/datatheme/themeb/blurLine.png") no-repeat left,
    box-mt: 12px,
    //box标题
    box-title-flex: row-reverse
  ),
  custom3: (
    //盒子背景色
    box-bg: rgba(#031d23, 0.8),
    box-bgTab: rgba(8, 68, 71, 0.8),
    line: url("@/assets/datatheme/themec/line.png") no-repeat right,
    line-right: url("@/assets/datatheme/themec/line.png") no-repeat left,
    box-mt: 12px,
    box-title-flex: row-reverse
  )
);

// 通用样式
@mixin common {
  @each $key, $value in $common {
    #{$prefix}-#{$key}: #{$value};
  }

  .bgImgs {
    background: var(--data-line);
  }
  .bgImg-rights {
    background: var(--data-line-right);
  }
  // 盒子
  .box {
    background: var(--data-box-bg);
    // background: linear-gradient(180deg, #fff,red);
    border-radius: 5px;
    margin-top: var(--data-box-mt);

    span {
      line-height: 1 !important;
      display: inline-block;
    }
  }

  .box-title {
    flex-direction: var(--data-box-title-flex);

    .box-title-img {
      transform: var(--data-box-title-img-transform);
    }
  }
  // 大屏模块顺序
  // 单位左侧
  .item-1 {
    grid-area: var(--data-box-item1);
  }

  .item-2 {
    grid-area: var(--data-box-item2);
  }

  .item-3 {
    grid-area: var(--data-box-item3);
  }

  .item-4 {
    grid-area: var(--data-box-item4);
  }

  //单位右侧
  .bgTab {
    // bg-[rgba(32,44,81,.6)]
    background: var(--data-box-bgTab);
  }

  .item1-1 {
    grid-area: var(--data-box-item1-1);
  }

  .item1-2 {
    grid-area: var(--data-box-item1-2);
  }

  .item1-3 {
    grid-area: var(--data-box-item1-3);
  }

  //个体左侧
  .item2-1 {
    grid-area: var(--data-box-item2-1);
  }

  .item2-2 {
    grid-area: var(--data-box-item2-2);
  }

  .item2-3 {
    grid-area: var(--data-box-item2-3);
  }

  .item2-4 {
    grid-area: var(--data-box-item2-4);
  }

  // 标题
  .title {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 18px;
    color: var(--data-base-color);
  }

  //分页文字颜色
  .el-pagination__total {
    color: var(--data-base-color);
  }

  //数据大屏文字颜色
  .el-text {
    color: var(--data-base-color);
  }

  // 数字
  .number {
    font-family: DIN;
  }

  // 渐变文字
  .gradient-text {
    background: var(--data-gradient-bg-text);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  // 渐变文字2
  .gradients-text {
    background: linear-gradient(0deg, #92f5fd 0%, #ffffff 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  //text24
  .textBig {
    font-family: DIN;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
  }

  .textalarm {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }

  .alltext {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }

  .el-overlay {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }

  .el-overlay-dialog .el-dialog.pure-dialog {
    background-color: rgba($color: #000000, $alpha: 0) !important;
    // opacity: 0.6;
    padding: 0 !important;
    margin: 40px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);

    &.is-fullscreen {
      margin: 0 !important;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateZ(0);
      backdrop-filter: blur(30px);
      z-index: -1;
      animation: bgChange 2s;
      animation-fill-mode: forwards;
    }

    @keyframes bgChange {
      0% {
        background-color: rgba(127, 127, 127, 0.15);
        backdrop-filter: blur(30px);
      }

      1% {
        background-color: rgba(127, 127, 127, 0.15);
        backdrop-filter: blur(0px);
      }

      100% {
        background-color: rgba(127, 127, 127, 0);
        backdrop-filter: blur(30px);
      }
    }
  }

  &.dark {
    .click-map-maker {
      .leaflet-popup-content-wrapper,
      .leaflet-popup-tip {
        background-color: #fff !important;
      }
    }

    .el-card {
      --el-card-bg-color: rgba(#25293b, 0);

      .el-card__body {
        min-height: 794px;
      }
    }
    .pure-table{
      border-bottom: var(--data-table-bottom-border);
    }
    .el-table {
      transform: scale(1);

      .el-table__inner-wrapper {
        margin: -2px;
      }

      thead {
        background-color: var(--bg-3);
      }

      tr {
        background-color: rgba(#25293b, 0);
        // background-color: rgba(127, 127, 127, 0.95);

        .is-leaf {
          background-color: var(--bg-3) !important;
        }

        td {
          background-color: rgba(#25293b, 0) !important;

          // background-color: rgba(127, 127, 127, 0.95) !important;
          &.el-table-fixed-column--right,
          &.el-table-fixed-column--left {
            background-color: rgba(16, 30, 45, 0.95) !important;
          }
        }

        &:hover {
          background-color: var(--bg-4) !important;
        }

        &:hover > td.el-table__cell {
          background-color: var(--bg-4) !important;
        }
      }
    }
  }
}

// 主题样式
@each $key, $style in $styles {
  html.data-dashboard-#{$key} {
    @include common;

    @each $itemKey, $item in $style {
      #{$prefix}-#{$itemKey}: #{$item};
    }

    line-height: 1 !important;
  }
}

html.data-dashboard- {
  &custom1,
  &custom2 {
    .box-title-text {
      height: 100%;
      position: absolute;
      left: 40px;
      top: 0;
      display: flex;
      align-items: center;
    }
  }
  &custom3 {
    .box-title-text {
      height: 100%;
      position: absolute;
      left: 10px;
      top: 0;
      display: flex;
      align-items: center;
    }
  }
}

html.data-dashboard-custom2 {
  .box {
    border: 1px solid;
    border-image: linear-gradient(
        to top,
        rgba(#fff, 0.6) 0%,
        #ffffff00 50%,
        #ffffff00 100%
      )
      1;
    clip-path: inset(0px 0px 0px 0.05% round 0 0 4px 4px);
    border-radius: 4px;
    transform: scale(1);
    z-index: 1;
    // &::before {
    //   content: "";
    //   position: absolute;
    //   inset: 2.5px;
    //   backdrop-filter: blur(10px);
    //   z-index: -1;
    //   border-radius: 4px;
    // }
  }
}
